<template>
  <div class="app-container">
    <el-row>
      <el-col :span="10">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>
            <span>来源位置：</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in sourceContainerLocation" :key="index">{{ item }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <span style="font-size: 14px; font-weight: 400; line-height: 1">来源操作：</span>
        <el-button type="text" @click="handleSourceBackTop">返回顶层</el-button>
        <el-button type="text" @click="handleSourceUpper">返回上一级</el-button>
        <el-table
          ref="sourceTable"
          :data="sourceData"
          :stripe="true"
          border
          max-height="700px"
          size="mini"
          style="width: 100%"
          tooltip-effect="dark"
          @selection-change="sourceSelectionChange"
        >
          <el-table-column align="center" type="selection" width="55"/>
          <el-table-column align="center" label="名称" prop="containerName"/>
          <el-table-column align="center" label="类型" prop="containerTypeName"/>
          <el-table-column align="center" label="位置" prop="containerLocation" width="260"/>
          <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="!scope.row.leaf"
                icon="el-icon-edit"
                size="mini"
                type="text"
                @click="handleSourceEnter(scope.row)"
              >进入
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="4" style="text-align:center; margin-top: 52px; padding-left: 24px; padding-right: 24px">
        <el-button size="small" type="primary" @click="handleTransfer">
          <span>转移至<i class="el-icon-d-arrow-right"></i></span>
        </el-button>
        <div>
          <span
            style="float: left; font-size: 14px; font-weight: 400; line-height: 1; margin-bottom: 3px; margin-top: 16px"
          >转移描述</span>
          <el-input
            v-model="form.shiftDesc"
            :rows="10"
            placeholder="请输入转移描述"
            type="textarea"
          >
          </el-input>
        </div>
        <el-button v-hasPermi="['biobank:shiftContainer:edit']" :loading="applying" size="small"
                   style="margin-top: 32px" type="success" @click="confirmShift"
        >确认转移
        </el-button>
      </el-col>
      <el-col :span="10">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>
            <span>目标位置：</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in targetContainerLocation" :key="index">{{ item }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <span style="font-size: 14px; font-weight: 400; line-height: 1">目标操作：</span>
        <el-button type="text" @click="handleTargetBackTop">返回顶层</el-button>
        <el-button type="text" @click="handleTargetUpper">返回上一级</el-button>
        <el-table
          ref="targetTable"
          :data="targetData"
          :stripe="true"
          border
          max-height="700px"
          size="mini"
          style="width: 100%"
          tooltip-effect="dark"
          @selection-change="targetSelectionChange"
        >
          <el-table-column align="center" type="selection" width="55"/>
          <el-table-column align="center" label="名称" prop="containerName"/>
          <el-table-column align="center" label="类型" prop="containerTypeName"/>
          <el-table-column align="center" label="位置" prop="containerLocation" width="260"/>
          <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="!scope.row.leaf"
                icon="el-icon-edit"
                size="mini"
                type="text"
                @click="handleTargetEnter(scope.row)"
              >进入
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { lazyTree } from '@/api/biobank/container'
import { addShift } from '@/api/activiti/shift'

export default {
  name: 'ShiftContainer',
  components: {},
  data() {
    return {
      // 来源列表
      sourceData: [],
      // 目标列表
      targetData: [],
      // 父来源
      parentSources: [],
      // 父目标
      parentTargets: [],
      // 来源位置
      sourceContainerLocation: [],
      // 目标位置
      targetContainerLocation: [],
      // 选中的来源
      selectSources: [],
      // 选中的目标
      selectTargets: [],
      // 转移描述
      shiftDesc: '',
      // 申请中
      applying: false,
      // 提交表单
      form: {
        shiftContainers: []
      }
    }
  },
  created() {
    this.getTopLevel(0)
  },
  methods: {
    // 获取顶层列表
    getTopLevel(flag) {
      lazyTree(0).then(response => {
        if (flag === 0) {
          this.sourceData = response.data
          this.targetData = response.data
        } else if (flag === 1) {
          this.sourceData = response.data
        } else if (flag === 2) {
          this.targetData = response.data
        }
      })
    },
    // 获取来源子列表
    handleSourceEnter(row) {
      this.parentSources.push(row)
      this.sourceContainerLocation = row.containerLocation.substr(1).split('/')
      lazyTree(row.containerId).then(response => {
        if (response.data && response.data.length > 0) {
          response.data.forEach(item => {
            if (item.containerTypeCode === 'box') {
              item.leaf = true
            }
          })
        }
        this.sourceData = response.data
      })
    },
    // 获取目标子列表
    handleTargetEnter(row) {
      this.parentTargets.push(row)
      this.targetContainerLocation = row.containerLocation.substr(1).split('/')
      lazyTree(row.containerId).then(response => {
        if (response.data && response.data.length > 0) {
          response.data.forEach(item => {
            if (item.containerTypeCode === 'box') {
              item.leaf = true
            }
          })
        }
        this.targetData = response.data
      })
    },
    // 返回来源顶层
    handleSourceBackTop() {
      this.getTopLevel(1)
    },
    // 返回来源上一级
    handleSourceUpper() {
      if (this.parentSources.length > 1) {
        this.handleSourceEnter(this.parentSources[this.parentSources.length - 2])
        this.parentSources.splice(this.parentSources.length - 2, this.parentSources.length - 1)
      } else {
        this.getTopLevel(1)
      }
    },
    // 返回目标顶层
    handleTargetBackTop() {
      this.getTopLevel(2)
    },
    // 返回目标上一级
    handleTargetUpper() {
      if (this.parentTargets.length > 1) {
        this.handleTargetEnter(this.parentTargets[this.parentTargets.length - 2])
        this.parentTargets.splice(this.parentTargets.length - 2, this.parentTargets.length - 1)
      } else {
        this.getTopLevel(2)
      }
    },
    // 来源列表选择事件
    sourceSelectionChange(selection) {
      this.selectSources = selection
    },
    // 目标列表选择事件
    targetSelectionChange(selection) {

    },
    // 转移至按钮点击事件
    handleTransfer() {
      const parentSource = this.parentSources[this.parentSources.length - 1]
      const parentTarget = this.parentTargets[this.parentTargets.length - 1]

      if (!parentSource || !parentTarget) {
        this.$message.warning('请选择容器')
        return false
      }
      if (parentSource.containerTypeCode !== parentTarget.containerTypeCode) {
        this.$message.warning('来源位置与目标位置必须为同一层级')
        return false
      }
      if (parentSource.containerId === parentTarget.containerId) {
        this.$message.warning('来源位置与目标位置不能相同')
        return false
      }

      this.selectSources.forEach(i => {
        this.targetData.push(i)
        let transfer = {}
        transfer.containerId = i.containerId
        transfer.oldParentId = parentSource.containerId
        transfer.newParentId = parentTarget.containerId
        transfer.oldContainerLocation = i.containerLocation
        const locSplit = i.containerLocation.split('/')
        transfer.newContainerLocation = parentTarget.containerLocation + '/' + locSplit[locSplit.length - 1]
        transfer.oldContainerSort = i.containerSort
        transfer.newContainerSort = i.containerSort
        transfer.containerName = i.containerName
        transfer.currentCount = i.currentCount
        transfer.totalCount = i.totalCount
        this.form.shiftContainers.push(transfer)
        this.sourceData.forEach((j, index) => {
          if (i.containerId === j.containerId) {
            this.sourceData.splice(index, 1)
          }
        })
      })
    },
    // 确认转移按钮点击事件
    confirmShift() {
      if (!this.form.shiftContainers || this.form.shiftContainers.length === 0) {
        this.$message.info('请选择需转移的容器')
        return false
      }
      this.form.shiftTitle = this.$store.getters.nickName + '的转移容器申请'
      this.form.shiftType = this.GLOBAL.SHIFT_TYPE.CONTAINER
      this.applying = true
      addShift(this.form).then(response => {
        this.$message.success(`转移容器申请提交成功`)
        this.applying = false
        this.refresh()
      }, error => {
        this.applying = false
      })
    },
    // 刷新界面
    refresh() {
      this.$store.dispatch('tagsView/delCachedView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/redirect' + this.$route.fullPath
          })
        })
      })
    }
  }
}
</script>
<style scoped>
</style>
